import React from 'react';
import '../style/progress.scss';

class Progress extends React.Component {
  constructor(props) {
    super(props)
    this.changProgress = this.changProgress.bind(this)
  }

  changProgress(e) {
    let progressBar = this.refs.progressBar;
    let progress = (e.clientX - progressBar.getBoundingClientRect().left) / progressBar.clientWidth;
    this.props.onProgressChange && this.props.onProgressChange(progress);
    // console.log(progress);
  }
  render() {
    return (
      <div className="components-progress" ref="progressBar" onClick={this.changProgress}>
          <div className="progress" style={
            {width: `${this.props.progress}%`, backgroundColor: this.props.barColor}
          }>
          </div>
      </div>
    )
  }
}
// 默认属性props
Progress.defaultProps = {
  barColor: '#2f9800'
};

export default Progress;
